<template>
  <div class="foolDay">
    <div class="foolDayTop">
    </div>
    <div class="foolDayCont"
      :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'padding-top: 220px;' : ''">
      <img src="../../../assets/img/activity/foolDay/contBg-cn.png"
        v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'"
        alt=""
        class="foolDayContImg">
      <img src="../../../assets/img/activity/foolDay/contBg-en.png" alt="" class="foolDayContImg" v-else>
      <div class="imgCont">
        <img :src="imgObj.url" alt="">
      </div>
      <div class="btn flexc">
        <span class="changeBtn" @click="handleGetImg">{{ $t('activity.changeOne') }}</span>
        <span class="shareBtn" @click="handleShareImg">{{ $t('activity.shareNow') }}</span>
      </div>
    </div>
    <div class="shareCont flexb" v-if="shareContShow">
      <div class="word">
        <p>
          {{ $t('activity.share') }}
          <span v-if="imgObj.type === '2' || imgObj.type === '3'">
            {{ $t('activity.superTip1') }}
          </span>
          <span v-else-if="imgObj.type === '4'">
            {{ $t('activity.superTip2') }}
          </span>
          <span v-else-if="imgObj.type === '1'">
            {{ $t('activity.superTip3') }}
          </span>
        </p>
        <p>{{ $t('activity.step') }}</p>
        <p>{{ $t('activity.step1') }}</p>
        <p>{{ $t('activity.step2') }}</p>
        <p>{{ $t('activity.step3') }}</p>
        <p>{{ $t('activity.step4') }}</p>
      </div>
      <div class="code" v-loading="codeLoading">
        <canvas class="codeCanvas" id="codeShare"></canvas>
      </div>
    </div>
    <div class="rules">
      <p>{{ $t('activity.remarksCont1') }}</p>
      <p>{{ $t('activity.remarksCont2') }}</p>
    </div>
  </div>
</template>

<script>
import { QRcodeCode } from '@/utils/validate';

export default {
  name: 'foolDay', // 愚人节活动
  data() {
    return {
      urlList: [], // 图片列表
      imgObj: {
        url: 'https://newdex-pic.oss-cn-hongkong.aliyuncs.com/cn/4/1.jpg'
      },
      shareContShow: false, // 分享内容
      codeLoading: false,
      isclick: true, // 避免用户一直点击
      randomNum: 1, // 随机数
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetImg();
    },
  },
  computed: {},
  created() {},
  mounted() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
    this.handleGetImg();
  },
  beforeDestroy() {},
  methods: {
    // 获取图片
    handleGetImg() {
      // 防止一直点击
      if (this.isclick) {
        this.isclick = false;
        setTimeout(() => {
          this.isclick = true;
        }, 200);
      } else {
        return;
      }
      this.$http.get('/fools/getImageUrl').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.shareContShow = false;
        this.urlList = res.urlList;
        this.handleRandom();
      });
    },
    handleRandom() {
      const randomNum = Math.floor(Math.random() * 20); // eslint-disable-line
      const len = this.urlList.length;
      const index = parseInt(len * Math.random()); // eslint-disable-line
      if (this.randomNum && this.randomNum === index) {
        this.handleRandom();
        return;
      }
      if (index < len) {
        this.randomNum = index;
        const url = this.urlList[index];
        const urlArr = url.split('https://newdex-pic.oss-cn-hongkong.aliyuncs.com/');
        const objArr = urlArr[1].split('/');
        this.imgObj = {
          url,
          lang: objArr[0],
          type: objArr[1]
        }
      } else {
        this.handleRandom();
      }
    },
    // 立即分享
    handleShareImg() {
      const scatter = this.$store.state.app.scatter;
      if (scatter && scatter.identity) {
        if (this.shareContShow) {
          return;
        }
        this.shareContShow = true;
        this.codeLoading = true;
        const params = {
          imageUrl: this.imgObj.url,
        };
        this.$http.post('/fools/generateImage', params).then((res) => {
          if (res.code !== 0) {
            // this.$message.error(res.msg);
            this.codeLoading = false;
            return;
          }
          const random = Math.random();
          this.imgObj.url = `${res.imageUrl}?v=${random}`;
          this.handleGetPayCode(this.imgObj.url);
        });
        return;
      }
      this.handleWalletPermission();
    },
    // 二维码生成
    handleGetPayCode(imgUrl) {
      const canvas = document.getElementById('codeShare');
      if (canvas) {
        setTimeout(() => {
          QRcodeCode(imgUrl, canvas, 100, (err) => {
            this.codeLoading = false;
            if (err) {
              this.$message.error(this.$t('jy.codeError'));
            }
          })
        }, 100)
      }
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
  },
}
</script>
<style lang="scss" scoped>
.foolDay{
  width: 100%;
  height: 1300px;
  margin-bottom: -1px;
  background-image: linear-gradient(-179deg, #424990 21%, #1F2357 94%);

  .foolDayTop {
    position: relative;
    width: 1260px;
    height: 262px;
    background: url('../../../assets/img/activity/foolDay/topBg.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;

    img {
      position: absolute;
      left: 50%;
      bottom: -110%;
      transform: translateX(-50%);
    }
  }

  .foolDayCont {
    position: relative;
    width: 530px;
    height: 730px;
    margin: -48px auto 50px;
    padding-top: 200px;
    // background: url('../../../assets/img/activity/foolDay/contBg-cn.png') no-repeat;
    // background-size: 100% 100%;
    // z-index: 100;

    .foolDayContImg {
      position: absolute;
      top: -5px;
      left: 0;
    }

    .imgCont {
      position: relative;
      width: 250px;
      height: 443px;
      margin: 20px auto 0;
      background: #fff;

      img {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }

    .btn {
      position: relative;
      margin-top: 20px;

      span {
        display: inline-block;
        padding: 0 40px;
        line-height: 45px;
        background: #F5373C;
        border-radius: 6px;
        color: #fff;
        cursor: pointer;
      }

      .changeBtn {
        margin-right: 20px;
      }
    }
  }

  .shareCont {
    width: 539px;
    // height: 128px;
    margin: 0 auto;
    color: #fff;
    border: 1px solid #4A90E2;
    border-radius: 9px;
    padding: 10px 20px;

    .word {
      flex: 4;
      font-size: 16px;
      padding-right: 10px;

      p:nth-child(2) {
        margin-top: 10px;
      }
    }

    .code {
      flex: 1;

      .codeCanvas {
        width: 100px;
        height: 100px;
      }
    }
  }

  .rules {
    width: 539px;
    margin: 50px auto;
    text-align: center;
    color: #fff;

    h3 {
      margin-bottom: 10px;
    }
  }
}
</style>
